<template>
    <div>
        <!-- 头部 -->
        <div class="category-header">
            <router-link tag="span" to="/index/welfare"><svg t="1640164914293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="64511" width="16" height="16"><path d="M744.3372563 1017.13692445c11.1289837 0 22.2701037-4.2477037 30.76551111-12.74311112 16.99081482-16.99081482 16.99081482-44.54020741 0-61.51888592L345.02883555 512.80099555 775.10276741 82.7392c16.99081482-16.97867852 16.99081482-44.54020741 0-61.51888592-16.99081482-16.99081482-44.52807111-16.99081482-61.51888593 0L252.74443852 482.04762075a43.51469037 43.51469037 0 0 0 0 61.53102222l460.83944296 460.81517036c8.48327111 8.49540741 19.62439111 12.74311111 30.75337482 12.74311112z" fill="#ffffff" p-id="64512"></path></svg></router-link>
            <div class="icont-header">签到有礼</div>
        </div>


        <!-- 签到有礼 -->
        <div class="checkin">
            <div class="sign-in-contine">
                <span>{{daynum}}</span>
                <p>连续签到/天</p>
            </div>
            <div class="sign-in" @click="btnSign" v-show="!weektime">立即签到</div>
            <div class="sign-in" v-show="weektime">已签到</div>
        </div>

        <!-- 签到日期 -->
        <div class="signin-detail">
            <div class="signin-header">本周已签到{{daynum}}天</div>
            <div class="signin-time">
                <div class="time">
                    <span>01/03</span>
                    <div class="coin"><svg t="1640672504706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="136364" width="28" height="28"><path d="M509.892478 1017.613571C229.33666 1017.613571 1.085693 789.362604 1.085693 508.806786S229.33666 0 509.892478 0s508.806786 228.250967 508.806786 508.806786S790.384433 1017.613571 509.892478 1017.613571z m0-910.321567a401.961831 401.961831 0 0 0-401.578645 401.578646c0 221.481352 180.097293 401.64251 401.578645 401.64251s401.514781-180.097293 401.514782-401.64251a401.897967 401.897967 0 0 0-401.514782-401.578646z" fill="#F2D857" p-id="136365"></path><path d="M509.189971 800.985905L231.12486 516.215043l284.89859-278.065112 278.001248 284.898591-284.834727 277.937383zM344.867157 517.620057l165.663964 169.751279 169.62355-165.663964-165.472371-169.815143-169.815143 165.727828z" fill="#EFB82E" p-id="136366"></path></svg></div>
                    
                    <p v-show="weektime!=1">未签</p>
                    <p v-show="weektime==1">已签</p>
                </div>
                <div class="time">
                    <span>01/04</span>
                    <div class="coin"><svg t="1640672504706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="136364" width="28" height="28"><path d="M509.892478 1017.613571C229.33666 1017.613571 1.085693 789.362604 1.085693 508.806786S229.33666 0 509.892478 0s508.806786 228.250967 508.806786 508.806786S790.384433 1017.613571 509.892478 1017.613571z m0-910.321567a401.961831 401.961831 0 0 0-401.578645 401.578646c0 221.481352 180.097293 401.64251 401.578645 401.64251s401.514781-180.097293 401.514782-401.64251a401.897967 401.897967 0 0 0-401.514782-401.578646z" fill="#F2D857" p-id="136365"></path><path d="M509.189971 800.985905L231.12486 516.215043l284.89859-278.065112 278.001248 284.898591-284.834727 277.937383zM344.867157 517.620057l165.663964 169.751279 169.62355-165.663964-165.472371-169.815143-169.815143 165.727828z" fill="#EFB82E" p-id="136366"></path></svg></div>
                    
                    <p v-show="weektime!=2">未签</p>
                    <p v-show="weektime==2">已签</p>
                </div>
                <div class="time">
                    <span>01/05</span>
                    <div class="coin"><svg t="1640672504706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="136364" width="28" height="28"><path d="M509.892478 1017.613571C229.33666 1017.613571 1.085693 789.362604 1.085693 508.806786S229.33666 0 509.892478 0s508.806786 228.250967 508.806786 508.806786S790.384433 1017.613571 509.892478 1017.613571z m0-910.321567a401.961831 401.961831 0 0 0-401.578645 401.578646c0 221.481352 180.097293 401.64251 401.578645 401.64251s401.514781-180.097293 401.514782-401.64251a401.897967 401.897967 0 0 0-401.514782-401.578646z" fill="#F2D857" p-id="136365"></path><path d="M509.189971 800.985905L231.12486 516.215043l284.89859-278.065112 278.001248 284.898591-284.834727 277.937383zM344.867157 517.620057l165.663964 169.751279 169.62355-165.663964-165.472371-169.815143-169.815143 165.727828z" fill="#EFB82E" p-id="136366"></path></svg></div>
                    
                    <p v-show="weektime!=3">未签</p>
                    <p v-show="weektime==3">已签</p>
                </div>
                <div class="time">
                    <span>01/06</span>
                    <div class="coin"><svg t="1640672504706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="136364" width="28" height="28"><path d="M509.892478 1017.613571C229.33666 1017.613571 1.085693 789.362604 1.085693 508.806786S229.33666 0 509.892478 0s508.806786 228.250967 508.806786 508.806786S790.384433 1017.613571 509.892478 1017.613571z m0-910.321567a401.961831 401.961831 0 0 0-401.578645 401.578646c0 221.481352 180.097293 401.64251 401.578645 401.64251s401.514781-180.097293 401.514782-401.64251a401.897967 401.897967 0 0 0-401.514782-401.578646z" fill="#F2D857" p-id="136365"></path><path d="M509.189971 800.985905L231.12486 516.215043l284.89859-278.065112 278.001248 284.898591-284.834727 277.937383zM344.867157 517.620057l165.663964 169.751279 169.62355-165.663964-165.472371-169.815143-169.815143 165.727828z" fill="#EFB82E" p-id="136366"></path></svg></div>
                    
                    <p v-show="weektime!=4">未签</p>
                    <p v-show="weektime==4">已签</p>
                </div>
                <div class="time">
                    <span>01/07</span>
                    <div class="coin"><svg t="1640672504706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="136364" width="28" height="28"><path d="M509.892478 1017.613571C229.33666 1017.613571 1.085693 789.362604 1.085693 508.806786S229.33666 0 509.892478 0s508.806786 228.250967 508.806786 508.806786S790.384433 1017.613571 509.892478 1017.613571z m0-910.321567a401.961831 401.961831 0 0 0-401.578645 401.578646c0 221.481352 180.097293 401.64251 401.578645 401.64251s401.514781-180.097293 401.514782-401.64251a401.897967 401.897967 0 0 0-401.514782-401.578646z" fill="#F2D857" p-id="136365"></path><path d="M509.189971 800.985905L231.12486 516.215043l284.89859-278.065112 278.001248 284.898591-284.834727 277.937383zM344.867157 517.620057l165.663964 169.751279 169.62355-165.663964-165.472371-169.815143-169.815143 165.727828z" fill="#EFB82E" p-id="136366"></path></svg></div>
                    
                    <p v-show="weektime!=5">未签</p>
                    <p v-show="weektime==5">已签</p>
                </div>
                <div class="time">
                    <span>01/08</span>
                    <div class="coin"><svg t="1640672504706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="136364" width="28" height="28"><path d="M509.892478 1017.613571C229.33666 1017.613571 1.085693 789.362604 1.085693 508.806786S229.33666 0 509.892478 0s508.806786 228.250967 508.806786 508.806786S790.384433 1017.613571 509.892478 1017.613571z m0-910.321567a401.961831 401.961831 0 0 0-401.578645 401.578646c0 221.481352 180.097293 401.64251 401.578645 401.64251s401.514781-180.097293 401.514782-401.64251a401.897967 401.897967 0 0 0-401.514782-401.578646z" fill="#F2D857" p-id="136365"></path><path d="M509.189971 800.985905L231.12486 516.215043l284.89859-278.065112 278.001248 284.898591-284.834727 277.937383zM344.867157 517.620057l165.663964 169.751279 169.62355-165.663964-165.472371-169.815143-169.815143 165.727828z" fill="#EFB82E" p-id="136366"></path></svg></div>
                    <p v-show="weektime!=6">未签</p>
                    <p v-show="weektime==6">已签</p>
                </div>
                <div class="time-last">
                    <span>01/09</span>
                    <div class="coin"><svg t="1640672504706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="136364" width="28" height="28"><path d="M509.892478 1017.613571C229.33666 1017.613571 1.085693 789.362604 1.085693 508.806786S229.33666 0 509.892478 0s508.806786 228.250967 508.806786 508.806786S790.384433 1017.613571 509.892478 1017.613571z m0-910.321567a401.961831 401.961831 0 0 0-401.578645 401.578646c0 221.481352 180.097293 401.64251 401.578645 401.64251s401.514781-180.097293 401.514782-401.64251a401.897967 401.897967 0 0 0-401.514782-401.578646z" fill="#F2D857" p-id="136365"></path><path d="M509.189971 800.985905L231.12486 516.215043l284.89859-278.065112 278.001248 284.898591-284.834727 277.937383zM344.867157 517.620057l165.663964 169.751279 169.62355-165.663964-165.472371-169.815143-169.815143 165.727828z" fill="#EFB82E" p-id="136366"></path></svg></div>
                    <p v-show="weektime!=7">未签</p>
                    <p v-show="weektime==7">已签</p>
                </div>
            </div>
        </div>

        <!-- 签到规则 -->
        <div class="signin-rule">
        <div class="rule-header">签到规则</div>
        <ul class="rule-list ">
        <li class="rule-item">
            1. 签到能获得什么?
            <br>
            每次签到(含补签)都将获得点数和经验值奖励；
            <br>
            签到以周为一个周期，周期内连续签到时间越长，奖励越丰厚：
            <br>
            连签1天..........5红袖币
            <br>
            连签2天..........5红袖币
            <br>
            连签3天..........5红袖币
            <br>
            连签4天..........10红袖币
            <br>
            连签5天..........10红袖币
            <br>
            连签6天..........15红袖币
            <br>
            连签7天..........1次抽奖机会
        </li>
        <li>
            2. 补签和当天签到的奖励均遵循以上规则，如周期内有漏签，奖励将重新计算。这种情况建议先从漏签时间最远的日期开始补签，完成所有补签后再进行当日签到，否则造成的奖励差额不予补齐。
        </li>
        <li>
            3. 如何补签？
            <br>
            用户可以通过消耗红袖币（不含免费币）补签，每天10红袖币，不限补签次数。
        </li>
        <li>
            4. 连续签到满7天（含补签），可获得1次抽奖机会，抽奖机会当日有效。
        </li>
        <li>
            5. 签到抽奖的奖励到账有一定时间延迟，请耐心等待几分钟。
        </li>
        <li>
            6. 奖励货币为免费币，每日签到（含补签）奖励的免费币有效期7天，满签抽奖所获的免费币有效期1个月，过期未使用的免费币系统将自动扣除。
        </li>
        <li>
            7. 本活动最终解释权归红袖添香所有。
        </li>
    </ul>
        </div>

    </div>
</template>

<script>
export default {
    props:['weektime','daynum'],
    data(){
        return {
            daytime:null,
            mounttime:null,
            week:null,
        }
    },
    methods:{
        
        getTime(){
            var now=new Date();
            this.daytime=now.getDate();
            this.mounttime=now.getMonth()+1;
            this.week=now.getDay();
            // console.log('今天日期',this.daytime,this.mounttime)
        },
        btnSign(){
            this.$emit('get-weektime',this.week)
        }
    },
    mounted(){
        this.getTime()
    }
}
</script>

<style lang="less" scoped>
.category-header{
    width: 100%;
    height: 44px;
    background-color: #FC0E50;
    display: flex;
    align-items: center;
    span{
        display: block;
        width: 44px;
        height: 44px;
        text-align: center;
        line-height: 44px;
    }
    .icont-header{
        color: white;
        margin: auto;
        padding-right: 44px;
    }
}

//签到
.checkin{
    width: 336px;
    height: 120px;
    margin: 16px auto;
    position: relative;
    background-color: #FF0D4E;
    .sign-in-contine{
        width: 80px;
        height: 51px;
        line-height: 25px;
        color: white;
        position: absolute;
        font-size: 14px;
        // border: 1px solid white;
        bottom: 28px;
        left: 20px;
    }
    .sign-in{
        width: 96px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        position: absolute;
        border-radius: 36px;
        background-color: white;
        bottom: 28px;
        right: 20px;
    }
}

//签到日期
.signin-detail{
    width: 336px;
    height: 228px;
    margin: auto;
    .signin-header{
        width: 100%;
        height: 24px;
        color: black;
        font-weight: bold;
        font-size: 16px;
        line-height: 24px;
    }
    .signin-time{
        width: 336px;
        height: 204px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .time{
            width: 74px;
            height: 92px;
            display: flex;
            border: 1px solid #ECECEC;
            border-top: 5px solid #D8D8D8;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            color: #9a9a9a;
            span{
                margin-top: 5px;
            }
            p{
                margin-bottom: 5px;
            }
        }
        .time-last{
            width: 155px;
            height: 92px;
            display: flex;
            border: 1px solid #ECECEC;
            border-radius: .25rem;
            border-top: 5px solid #D8D8D8;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            color: #9a9a9a;
            span{
                margin-top: 5px;
            }
            p{
                margin-bottom: 5px;
            }
        }
    }
}


//签到规则
.signin-rule{
    width: 336px;
    height: 649px;
    margin: 10px auto;
    .rule-header{
        width: 336px;
        height: 17px;
        text-align: center;
        line-height: 17px;
        color: #33373D;
        margin: 16px auto;
    }
    .rule-list{
        padding: 0.798rem;
        font-size: 0.875rem;
        color: #7b7b7b;
        line-height: 1.5rem;
        .rule-item{
            font-size: 0.875rem;
            color: #7b7b7b;
            // line-height: 1.5rem;
        }
    }
}

</style>